<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>scatck标题字动画效果</title>
    <style>
      :root {
        font-size: 32px;
      }
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        min-height: 100vh;
      }
      #container {
        width: 600px;
      }
      h1 {
        margin: 0;
        letter-spacing: -2px;
      }
      p {
        font-size: 0.9rem;
        color: #666;
        line-height: 1.3rem;
        position: relative;
        top: 0.8rem;
        opacity: 0;
        animation: 0.5s swift-up ease-out forwards,
          0.5s fade-in ease-out forwards;
        animation-delay: 0.8s;
      }
      span {
        display: inline-block;
        overflow: hidden;
        position: relative;
        top: 0.8rem;
        animation: 0.3s swift-up ease-in-out forwards;
      }
      i {
        font-style: normal;
        position: relative;
        top: 2.2rem;
        animation: 0.5s swift-up ease-in-out forwards;
      }
      @keyframes swift-up {
        to {
          top: 0rem;
        }
      }
      @keyframes fade-in {
        to {
          opacity: 1;
        }
      }
      span:nth-of-type(1) i {
        animation-delay: 0s;
      }
      span:nth-of-type(2) i {
        animation-delay: 0.1s;
      }
      span:nth-of-type(3) i {
        animation-delay: 0.2s;
      }
      span:nth-of-type(4) i {
        animation-delay: 0.3s;
      }
      span:nth-of-type(5) i {
        animation-delay: 0.4s;
      }
      span:nth-of-type(6) i {
        animation-delay: 0.5s;
      }
      span:nth-of-type(1) {
        animation-delay: 0s;
      }
      span:nth-of-type(2) {
        animation-delay: 0.1s;
      }
      span:nth-of-type(3) {
        animation-delay: 0.2s;
      }
      span:nth-of-type(4) {
        animation-delay: 0.3s;
      }
      span:nth-of-type(5) {
        animation-delay: 0.4s;
      }
      span:nth-of-type(6) {
        animation-delay: 0.5s;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <h1>
        <span><i> The </i> </span>
        <span><i> best </i> </span>
        <span><i> artgweis </i> </span>
        <span><i> Theaa </i> </span>
        <span><i> best </i></span>
        <span><i> last </i></span>
      </h1>
      <p>
        scatck标题字动画效果scatck标题字动画效果scatck标题字动画效果scatck标题字动画效果scatck标题字动画效果scatck标题字动画效果scatck标题字动画效果scatck标题字动画效果scatck标题字动画效果scatck标题字动画效果
      </p>
    </div>
  </body>
</html>
